<script setup>
import { useRoute } from "vue-router";

import useShopStore from "@/stores/shop.js";

import ShopInfo from "@/components/ShopInfo/ShopInfo.vue";
import Product from "@/components/ShopInfo/Product.vue";
import CartsButton from "@/components/carts/cartsButton.vue";
import useCartsStore from "@/stores/carts.js";

import { computed, ref } from "vue";
import router from "@/router";

const route = useRoute();

const shopStore = useShopStore();
let shopList = shopStore.nearbyList;

const cartsStore = useCartsStore();
const change = cartsStore.change;

let id = route.query.id;

let shopInfo = shopList.find(item => item.id == id);
let light = ref(0);
let text = ref(``);

//获取购物车列表并传回仓库
let cartsList = computed(() => {
  let list = [];
  shopInfo.category.forEach(item => {
    let shopList = item.list.filter(item => item.number > 0);
    if (shopList.length) {
      list = shopList;
    }
  });
  let id=route.query.id
  change( id, list )
  return { id, list };
});

const changeLight = id => {
  light.value = id;
};
const back = () => {
  router.go(-1);
};

let productList = computed(() => {
  let arr = [];
  if (light.value == 0) {
    shopInfo.category.forEach(item => {
      arr = [...arr, ...item.list];
    });
  } else {
    arr = shopInfo.category.find(item => item.id == light.value).list;
  }

  if (text.value !== "") {
    const regex = new RegExp(
      text.value
        .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")
        .split("")
        .map(char => `\\u${char.charCodeAt(0).toString(16)}`)
        .join(""),
      "i"
    );
    arr = arr.filter(item => regex.test(item.title));
  }
  return arr;
});
</script>

<template>
  <div class="shop">
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont search_back" @click="back()">&#xe697;</span>
      <div class="search_content">
        <span class="iconfont search_content_icon">&#xe632;</span>
        <input type="text" class="search_content_input" placeholder="请输入商品名称" v-model="text" />
      </div>
    </div>
    <!-- 商店信息 -->
    <div class="shop_info">
      <ShopInfo :msg="shopInfo" />
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="category">
        <div
          :class="{ 'category_item': true, 'category_item--active': light == 0 }"
          @click="changeLight(0)"
        >全部商品</div>
        <div
          :class="{ 'category_item': true, 'category_item--active': light == item.id }"
          v-for="item, index in shopInfo.category"
          @click="changeLight(item.id)"
        >{{ item.name }}</div>
      </div>
      <div class="product">
        <div>
          <Product v-for="item in productList" :msg="item" />
        </div>
      </div>
    </div>
    <!-- 购物车底部 -->
    <div>
      <CartsButton :cartsList="cartsList" :id="id" />
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/style/viriables.scss";

.shop {
  //搜索
  .search {
    margin: 0.18rem;
    display: flex;
    align-items: center;

    &_back {
      font-size: 0.24rem;
      margin-right: 0.08rem;
      color: #b6b6b6;
    }

    &_content {
      flex: 1;
      height: 0.32rem;
      background-color: #f5f5f5;
      border-radius: 0.16rem;
      display: flex;
      align-items: center;

      &_icon {
        color: #b6b6b6;
        margin: 0 0.12rem;
      }

      &_input {
        border: none;
        outline: none;
        background: none;
        width: 100%;
        height: 0.32rem;
      }
    }
  }

  //商店信息
  .shop_info {
    margin: 0 0.18rem;
  }

  // 内容
  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.7rem;
    bottom: 0.5rem;
    display: flex;

    .category {
      overflow-y: scroll;
      width: 0.78rem;
      background-color: #f5f5f5;

      &_item {
        line-height: 0.4rem;
        font-size: 0.14rem;
        text-align: center;
        color: $content_fontcolor;

        &--active {
          background-color: $bgColor;
        }
      }
    }

    .product {
      flex: 1;
      overflow-y: scroll;
    }
  }
}
</style>